<template>
    <div class="home-app">
        <div id="box">
            <div id="list">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">7</div>
                <div class="item">8</div>
                <div class="item">9</div>
                <div class="item">10</div>
                <div class="item">11</div>
                <div class="item">12</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
    scroll();
});

function scroll() {
    let list = document.getElementById("list");
    let top = 0;
    list.innerHTML += list.innerHTML;
    const listHeight = (list.clientHeight + list.scrollTop) / 2;
    setInterval(() => {
        top -= 35;
        if (top <= -listHeight) {
            top = 0;
        }
        list.style.top = top + "px";
    }, 1000)
}
</script>

<style lang="less" scoped>
@import url(../style/public.less);

.home-app {
    #box {
        width: 200px;
        height: 300px;
        overflow: hidden;
        border: 1px solid pink;
    }

    #list {
        width: 100%;
        position: relative;
        top: 0;
        .item {
            width: 200px;
            height: 30px;
            background-color: red;
            text-align: center;
            line-height: 30px;
            margin-bottom: 5px;
        }
    }
}</style>